import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
// import 'package:flutter/material.dart';
import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'member_page.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bottomTabs = [
    BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), title: Text('首页')),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.search), title: Text('分类')),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.shopping_cart), title: Text('购物车')),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.profile_circled), title: Text('会员中心')),
  ];

  final List tabBodies = [HomePage(), CategoryPage(), CartPage(), MemberPage()];

  int _currentIndex = 0;
  var currentPage;
  @override
  void initState() {
    currentPage = tabBodies[_currentIndex];
    super.initState();
  }

  handOnTag(index) {
    setState(() {
      _currentIndex = index;
      currentPage = tabBodies[_currentIndex];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
        bottomNavigationBar: BottomNavigationBar(
            // 这里有句代码type:BottomNavigationBarType.fixed,这个是设置底部tab的样式，
            // 它有两种样式fixed和shifting，只有超过3个才会有区别，国人的习惯一般是使用fixed的。
            // 感兴趣的小伙伴可以自行折腾shifting模式
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.blue,
            currentIndex: _currentIndex,
            items: bottomTabs,
            onTap: (index) => handOnTag(index)),
        body: currentPage);
  }
}
